<template>
	<view>
		<view class="time">
			<view class="uni-form-item uni-column">
				<input class="uni-input" focus v-model="phone" placeholder="请输入客户手机号" />
			</view>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<button type="primary" @click="query">查询</button>
		</view>
		<view class="uni-form-item uni-column uni-center" v-if="!FormData">
			<view class="title">没有信息</view>
		</view>
		<block v-for="item in FormData" :key="item.id">
			<view class="uni-list-cell list" v-if="item.state==0">
				<view class="uni-triplex-row">
					<view class="uni-triplex-left">
						<text class="uni-title uni-ellipsis title">{{item.name}}兑换券</text>
						<text class="uni-text">有效期：{{timestampToTime(item.atime).split(' ')[0]}}~{{timestampToTime(item.btime).split(' ')[0]}}</text>
						<text class="uni-text fsize">备注:10积分可兑换10枚鸡蛋/5元话费{{item.remark}}</text>
					</view>
					<view class="uni-triplex-right" @click="toUse(item.id)" v-if="new Date(item.atime).getTime() < new Date().getTime()">
						<text class="uni-text score">去使用</text>
					</view>
					<view class="uni-triplex-right" v-else>
						<text class="uni-text score" style="background: #808080;" >未生效</text>
					</view>
					<uni-icon type="arrowright" size="18" style="line-height: 68px;"></uni-icon>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import DyDate from '@/components/dy-Date/dy-Date.vue'
	
	export default {
		components: {
			DyDate,
		},
		data() {
			return {
				phone: '',
				FormData: [],
			}
		},
		mounted() {
			let params = {
				page: 1,
				limit: 10,
			};
			// this.init(params);
		},
		methods: {
			init(params) {
				this.$api.getPayOrderPage(params).then((res) => {
					if (res.rows.length == 0) {
						this.FormData = ''
						return
					}
					this.FormData = res.rows
					console.log(this.FormData)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			
			// 时间格式化
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			},
			
			// 查询
			query() {
				if (this.phone == "") {
					uni.showToast({
						icon: 'none',
						title: "请输入手机号",
						duration: 2000,
					})
					return
				}
				let params = {
					page: 1,
					limit: 999999,
					phone: this.phone
				}
				this.$api.getQuan(params).then((res) => {
					if (res.success) {
						if (res.rows.length == 0) {
							this.FormData = ''
							return
						}
						this.FormData = res.rows || ''
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 2000,
						})
					}
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			toUse(id) {
				uni.showModal({
				    title: '提示',
				    content: '确认兑换鸡蛋吗？',
				    success: (res) => {
				        if (res.confirm) {
									const USER = uni.getStorageSync('user');
									let params = {
										qid: id,
										ygid: USER.id
									}
										this.$api.dhjd(params).then((res) => {
											if (res.success) {
												uni.showToast({
													icon: 'success',
													title: "兑换成功",
													duration: 2000,
												})
												setTimeout(() => {
													this.query()
												},1000)
											} else {
												uni.showToast({
													icon: 'none',
													title: res.msg,
													duration: 2000,
												})
												setTimeout(() => {
													this.query()
												},1000)
											}
										}).catch((err) => {
											console.log('request fail', err);
										})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style scoped>
	.box {
		background: #F8F8FF;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		line-height: 24px;
	}

	.name {
		font-weight: bold;
		font-size: 16px;
	}

	.color {
		color: red;
	}

	.shuangb {
		display: flex;
		justify-content: space-between;
	}

	.cent {
		display: flex;
		justify-content: center;
	}

	.bdfw {
		background: #007AFF;
		display: block;
		width: 100px;
		text-align: center;
		border-radius: 10px;
		color: #fff;
	}

	.time {
		display: flex;
	}

	.dateTime {
		height: 24px;
		padding: 7px 12px;
		line-height: 24px;
	}

	.score {
		background: #0a5494;
		color: #fff;
		border-radius: 1em;
		padding: 4px 10px;
		font-size: 14px;
	}

	.number {
		height: 176upx;
		margin-top: 40upx;
		text-align: center;
		font-size: 30px;
		color: #ec1515;
	}

	.jifen {
		color: #111111;
		font-size: 18px;
		display: inline-block;
		margin-left: 5px;
	}

	.my {
		display: block;
		font-size: 15px;
		color: #635a5a;
	}

	.uni-triplex-right {
		width: 16%;
		text-align: right;
		line-height: 2em;
		font-size: 20px;
	}

	.top {
		display: inline-block;
		width: 49.8%;
	}

	.list {
		border: 1px solid #128df7;
		border-radius: 60px;
		width: 86%;
		margin: 1.5em auto;
		padding: 0px 11px;
	}

	.uni-triplex-right {
		width: 22%;
		text-align: right;
		line-height: 1em;
		font-size: 20px;
		margin: auto;
	}

	.uni-triplex-left {
		width: 81%;
	}

	.title {
		font-size: 20px;
		border-bottom: 1px solid #045da9;
		width: 87%;
		color: #055da9;
	}

	.uni-list-cell:after {
		background-color: unset;
	}
	
	.fsize {
		font-size: 10px;
	}
</style>
